<template>
    <!-- 外层容器，添加页面边距和阴影效果 -->
    <div class="page-container">
      <el-container>
        <!-- 左侧菜单区域 -->
        <el-aside width="140px" class="light-sidebar">
          <!-- 不可点击的菜单标题 -->
  
          <!-- 菜单分隔线 -->
  
          <!-- 带滚动区域的菜单 -->
          <el-scrollbar class="hidden-scrollbar">
            <el-menu
              router
              :default-active="$route.path"
              background-color="#ffffff"
              active-text-color="#409EFF"
              text-color="#333"
            >
              <div class="menu-title">房价房态</div>
              <el-menu-item index="RoomStatePreserve">
                <span>房态维护</span>
              </el-menu-item>
              <el-menu-item index="/RoomMoney">
                <span>房价管理</span>
              </el-menu-item>
              <el-menu-item index="/Stay">
                <span>住宿设置</span>
              </el-menu-item>
              <el-divider />
  
              <div class="menu-title">房型管理</div>
              <el-menu-item index="/RoomType">
                <span>房型设置</span>
              </el-menu-item>
              <el-menu-item index="/RoomNum">
                <span>房号设置</span>
              </el-menu-item>
              <el-divider />
              <div class="menu-title">商品管理</div>
              <el-menu-item index="/Commodity">
                <span>商品列表</span>
              </el-menu-item>
              <el-menu-item index="/Reservation">
                <span>预约列表</span>
              </el-menu-item>
              <el-menu-item index="/404">
                <span>聚合商品</span>
              </el-menu-item>
              <el-menu-item index="/ProductLabel">
                <span>商品标签</span>
              </el-menu-item>
              <el-menu-item index="/Sort">
                <span>分类管理</span>
              </el-menu-item>
              <el-menu-item index="/404">
                <span>商户管理</span>
              </el-menu-item>
              <el-menu-item index="/404">
                <span>商品设置</span>
              </el-menu-item>
              <el-divider />
              <div class="menu-title">餐饮管理</div>
              <el-menu-item index="/DishesView">
                <span>菜品列表</span>
              </el-menu-item>
              <el-menu-item index="/404">
                <span>菜品分组</span>
              </el-menu-item>
              <el-menu-item index="/404">
                <span>菜品规格</span>
              </el-menu-item>
              <el-menu-item index="/404">
                <span>堂食设置</span>
              </el-menu-item>
              <el-menu-item index="/404">
                <span>桌号管理</span>
              </el-menu-item>
              <el-divider />
              <div class="menu-title">收款码管理</div>
              <el-menu-item index="/404">
                <span>收款码列表</span>
              </el-menu-item>
  
             
            </el-menu>
          </el-scrollbar>
        </el-aside>
  
        <!-- 右侧内容区域 -->
        <el-main>
          <router-view />
        </el-main>
      </el-container>
    </div>
  </template>
  
  <script setup>
  import { ref } from "vue";
  // 导入图标组件
  import {
    MagicStick,
    DataLine,
    Monitor,
    Connection,
    Opportunity,
    Promotion,
    BrushFilled,
    DataAnalysis,
    ChatDotRound,
    Setting,
    Money,
  } from "@element-plus/icons-vue";
  
  // 菜单折叠状态
  const isCollapse = ref(false);
  </script>
  
  <style lang="scss" scoped>
  /* 页面外层容器样式 */
  .page-container {
    height: calc(100vh - 10px); /* 留出边距空间 */
  
    border-radius: 5px; /* 圆角 */
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); /* 阴影效果 */
    overflow: hidden; /* 隐藏溢出内容 */
  
    /* 容器布局 */
    .el-container {
      height: 100%;
  
      /* 左侧菜单样式 */
      .light-sidebar {
        background: #fff; /* 浅色背景 */
        transition: width 0.3s;
  
        /* 菜单标题样式 */
        .menu-title {
          height: 60px;
          line-height: 60px;
          text-align: center;
          font-size: 14px;
          font-weight: bold;
          color: #333; /* 黑色字体 */
          user-select: none; /* 禁止文字选择 */
        }
  
        /* 分隔线样式 */
        .el-divider {
          margin: 8px 0;
          background-color: #ebeef5;
        }
      }
  
      /* 隐藏滚动条 */
      .hidden-scrollbar {
        :deep(.el-scrollbar__bar) {
          display: none; /* 隐藏滚动条 */
        }
        .el-scrollbar__wrap {
          overflow-x: hidden; /* 隐藏横向滚动 */
        }
      }
  
      /* 菜单项样式 */
      .el-menu {
        border-right: none;
  
        /* 菜单项通用样式 */
        .el-menu-item {
          height: 48px;
          line-height: 48px;
          margin: 2px 8px;
          border-radius: 4px;
          transition: all 0.3s;
  
          /* 鼠标悬停效果 */
          &:hover {
            background-color: #f5f7fa !important;
          }
  
          /* 激活状态样式 */
          &.is-active {
            background-color: #ecf5ff !important;
            position: relative;
  
            /* 激活指示条 */
            &::after {
              content: "";
              position: absolute;
              right: 0;
              top: 50%;
              transform: translateY(-50%);
              height: 60%;
              width: 3px;
              background: #409eff;
            }
          }
  
          /* 图标样式 */
          .el-icon {
            margin-right: 12px;
            font-size: 18px;
          }
        }
      }
  
      /* 右侧内容区域 */
      .el-main {
        padding: 20px;
        background-color: #f5f7fa;
      }
    }
  }
  </style>